<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>聊天</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../css/sm.min.css">
		<link rel="stylesheet" href=" ../css/sm-extend.min.css">
		<link rel="stylesheet" href=" ../css/iconfont.css">
		<style type="text/css">
			/* 背景色 */
			.content {
				background-color: rgb(237,237,237);
			}
			.bar{
				background-color: rgb(54,53,61);
			}
			.inform-top span{
				color: #ffffff;
			}
			/* 底部定位 */
			.bar .searchbar{
				bottom: 0;
			}
			.bar-tab{
				height: 2.3rem;
			}
			/* 底部颜色 */
			.bar .searchbar{
				padding: 0.4rem;
				padding-top: 0.4rem;
				background-color: rgb(244,243,248);
				height: 100%;
			}
			.bar .searchbar .search-input{
				margin-left: 0.3rem;
				height: 100%;
				width: 76%;
			}
			.bar .searchbar input{
				height: 100%;
				font-size: 0.8rem;
				color: #000000;
				background-color:rgb(252,252,252);
			}
			.bar .searchbar span{
				font-size: 1rem;
				margin-left: 2%;
			}
			.bar .searchbar .col-10{
				margin-left: 0.4rem;
				position: relative;
			}
			/* 对方消息样式 */
			.userMesage{
				padding: 0.5rem 0;
				padding-bottom: 0.5rem;
			}
			.userMesage,.myMesage{
				position: relative;
			}
			.userMesage .photo{
				height: 2rem;
				position: absolute;
				left: 0rem;
			}
			.userMesage .photo img{
				height: 100%;
				width: 2rem;
			}
			.userMesage .userContent{
				word-wrap:break-word;
				width:auto;
				display:inline-block !important; 
				display:inline; 
				max-width: 67%;
				
				min-height: 1.7rem;
				margin-left: 0.5rem;
				background-color: white;
				border-radius: 0.5rem;
				padding: 0.3rem;
				font-size: 0.75rem;
				margin-left: 16%;
				color: #000000;
			}
			/* 自己消息 */
			.myMesage{
				padding: 0.5rem 0;
				padding-bottom: 0.5rem;
				text-align:right;
			}
			.myMesage .photo{
				height: 2rem;
				position: absolute;
				right: 0rem;
				top: 0.5rem;
			}
			.myMesage .photo img{
				height: 100%;
				width: 2rem;
			}
			.myMesage .userContent{
				word-wrap:break-word;
				width:auto; 
				display:inline-block !important; 
				display:inline; 
				max-width: 67%;
				min-height: 1.7rem;
				margin-left: 0.5rem;
				background-color: rgb(163,230,95);
				border-radius: 0.5rem;
				padding: 0.3rem;
				font-size: 0.75rem;
				margin-right: 16%;
				text-align:left;
				color: #000000;
			}
			#mess .userContent img{
				width: 100%;
			}
			/* 图片窗口 */
			#addImg {
				position: absolute;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<!-- 工具栏 -->
				<div class="inform-top row" style="height: auto; margin-bottom: 0;line-height: 2.2rem;">
					<div class="t1 col-33">
						<span onclick="returns()" class="close-popup iconfont icon-fanhui"></span>
					</div>
					<div class="t2" style="position: absolute;width: 40%; margin-left:30% ; text-align: center;">
						<span id="informName"></span>
					</div>
				</div>
			</header>
			<!-- 底部发送栏 -->
			<nav class="bar bar-tab">
				<div class="searchbar row">
				    <div class="search-input col-85">
				      <input type="search" id='search'/>
				    </div>
					<div class="col-10">
						<form id="imgForm" method="post" enctype="multipart/form-data">
							<input type="file" @change="addImgMethod" id="addImg" name="img" accept="image/jpeg" />
						</form>
						 <span class="iconfont icon-tupian" style="color: #000000;"></span>
					</div>
					<div class="col-10">
						<span onclick="submitChat()" class="iconfont icon-sent" style="color: #000000;"></span>
					</div>
				</div>
				
			</nav>
			<!-- 这里是页面内容区 -->
			<div class="content infinite-scroll infinite-scroll-top" data-distance="30" style="padding: 0 0.3rem;">
				<div id="mess">
					
					<!-- <div class="userMesage">
						<div class="photo">
							<img src="img/shop/liebiao_xiaomi5.jpg" >
						</div>
						<div class="userContent">
							<span id="" style="width: 100%; height: 100%;">
								
							阿萨斯大所大所大所多撒22222222222222222222222222222222222222222222222222222222222222
							阿萨斯大所大所大所多撒阿萨斯大所大所大所多撒
							
							</span>
						</div>
					</div> -->
					
					<!-- 我方信息 -->
					<!-- <div class="myMesage">
						<div class="userContent">
							阿萨斯大所大所大所多撒
							阿萨斯大所大所大所多撒
							阿萨斯大所大所大所多撒
							阿萨斯大所大所大所多撒
							阿萨斯大所大所大所多撒阿萨斯大所大所大所多撒
						</div>
						<div class="photo">
							<img src="img/shop/liebiao_xiaomi5.jpg" >
						</div>
					</div> -->
					
				</div>
				
				<!-- 加载提示符 -->
				<div class="infinite-scroll-preloader" >
				  <div class="preloader">
				  </div>
				</div>
				<input id="userImg" type="hidden"/>
				<input id="otherImg" type="hidden"/>
				<input id="otherId" type="hidden"/>
			</div>
			
		</div>

		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src="../js/config.js"></script>
		<script type="text/javascript">
			/* 获取请求参数,聊天对象id */
			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg); //匹配目标参数
				if (r != null) return unescape(r[2]);
				return null; //返回参数值
			}
			var oppositeUserId = getUrlParam('oppositeUserId');
			/* 发送时间计算 */
			function timeCount(time) {
				var num = new Date().getTime() - Date.parse(time);
				var date = new Date(Date.parse(time));
				//一小时以内
				if (num < 3600000) {
					return Math.ceil(num / 60000) + '分钟前';
				} else if (date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)) {
					//今天发送的
					return time.substring(11, 16);
				} else {
					//之前的信息
					return time.substring(0, 10);
				}
			}
			/* 图片地址 */
			function imgSrc(src){
				return  src;
			}
			function returns() {
				window.history.go(-1);
				//location.href = "forum-index.html";
			}
			/* 消息提交 */
			function submitChat(){
				var mes=$("#search").val();
				if(mes.length==0){
					$.toast("请输入信息！");
					return;
				}
				$.ajax({
					type: 'get',
					url: serviceIP+"/forum/submitChat",
					dataType: 'json',
						data:{
							oppositeUserId: oppositeUserId,
							mes: mes
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						if(data.code==200&&data.status==1){
							$("#search").val("");
							
							var html='<div class="myMesage">'
										+'	<div class="userContent">'
										+		mes
										+'	</div>'
										+'	<div class="photo">'
										+'		<img src="'+$("#userImg").val()+'" >'
										+'	</div>'
										+'</div>';
							$('#mess').append(html);
							$('.infinite-scroll-top')[0].scrollTop=$('.infinite-scroll-top')[0].scrollHeight;
						}else{
							$.toast("系统维护请稍后！");
						}
					}});
			}
			/* 图片上传 */
			$("#addImg").change(function(){
				var path=$("#addImg").val();
				if(path!=null&&path!=""){
					var that = this;
					$.ajax({
						url: serviceIP+"/forum/addImg",
						type: "post",
						dataType: "json",
						cache: false,
						data: new FormData($("#imgForm")[0]),
						headers: {
									"token":token,
									"refreshtoken":refreshtoken
								},
						processData: false, // 不处理数据
						contentType: false, // 不设置内容类型
						success: function(data) {
							/* 保存图片地址提交 */
							var src='<img src="'+data.url+'">';
							submitImg(src);
						}
					});
				}
			});
			/* 图片提交 */
			function submitImg(mes){
				$.ajax({
					type: 'get',
					url: serviceIP+"/forum/submitChat",
					dataType: 'json',
						data:{
							oppositeUserId: oppositeUserId,
							mes: mes
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						if(data.code==200&&data.status==1){
							var html='<div class="myMesage">'
										+'	<div class="userContent">'
										+		mes
										+'	</div>'
										+'	<div class="photo">'
										+'		<img src="'+$("#userImg").val()+'" >'
										+'	</div>'
										+'</div>';
							$('#mess').append(html);
							$('.infinite-scroll-top')[0].scrollTop=$('.infinite-scroll-top')[0].scrollHeight;
						}else{
							$.toast("系统维护请稍后！");
						}
					}});
			}
		</script>
		<script>
			// 加载flag
			var loading = false;
			// 最多可加载的条目
			var maxItems = 100;
			// 每次加载添加多少条目
			var itemsPerLoad = 12;
			// 初始页
			var lastIndex = 1;
			// 生成新条目的HTML
			function addItems(reply,oppositeUser,user) {
				var html = '';
				if(reply.userId==oppositeUserId){
					//加载对方信息
			html+='<div class="userMesage">'
					+'	<div class="photo">'
					+'<a href="forum-other-centre.html?userId='+oppositeUser.id+'"><img src="'+imgSrc(oppositeUser.photo)+'" ></a>'
					+'	</div>'
					+'	<div class="userContent">'
					+		reply.content
					+'	</div>'
					+'</div>';
				}else{
					//加载我方信息
			html+='<div class="myMesage">'
					+'	<div class="userContent">'
					+		reply.content
					+'	</div>'
					+'	<div class="photo">'
					+'<a href="forum-other-centre.html?userId='+user.id+'"><img src="'+imgSrc(user.photo)+'" ></a>'
					+'	</div>'
					+'</div>';
				}
		
				// 添加新条目
				$('#mess').prepend(html);
			}
			//异步请求封装
			function aja() {
				// 如果正在加载，则退出
				if (loading) return;
				// 设置flag
				loading = true;
				//请求加载信息
				$.ajax({
					type: 'get',
					url: serviceIP+"/forum/chattingRecord",
					dataType: 'json',
						data:{
							page: lastIndex,
							limit: itemsPerLoad,
							oppositeUserId: oppositeUserId
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						// 重置加载flag
						loading = false;
						var scroller = $('.infinite-scroll-top');
						var scrollHeight = scroller[0].scrollHeight; // 获取当前滚动元素的高度
						//用户名赋值
						if($("#informName").html()==""){
							$("#informName").html(data.data.oppositeUser.nickname);
						}
						//页面遍历添加
						$.each(data.data.recordPH.list, function(i, item) {
							addItems(item,data.data.oppositeUser,data.data.user);
						});
						//保存自己头像
						$("#userImg").val(imgSrc(data.data.user.photo));
						$("#otherImg").val(imgSrc(data.data.oppositeUser.photo));
						$("#otherId").val(data.data.oppositeUser.id);
						// 更新最后加载的序号
						lastIndex++;
						
						//容器发生改变,如果是js滚动，需要刷新滚动
						$.refreshScroller();
						// 将滚动条的位置设置为最新滚动元素高度和之前的高度差
						scroller.scrollTop(scroller[0].scrollHeight - scrollHeight);
						//无数据
						if (data.data.recordPH.size < itemsPerLoad) {
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
						}
						if (data.data.recordPH.size < 1) {
							// 加载完毕，则注销无限加载事件，以防不必要的加载
							$.detachInfiniteScroll($('.infinite-scroll'));
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
							//提醒
							$.toast("已无更多记录");
							return;
						}
					}
				});
			}
			// 注册'infinite'事件处理函数
			$(document).on('infinite', function() {
				aja();
			});
			aja();
		</script>
		<!-- 即使通信 -->
		<script type="text/javascript">
			$(document).ready(function(){
					var ws = null;
					//连接服务器
					//添加地址和参数
					var url = wsIP+"/forum/userChat";
					//创建对象，连接服务器
					ws = new WebSocket(url); 	//html5中提供了	
					//给open事件绑定方法
					ws.onopen = function(){
						console.log("连接成功");
						//发送refreshtoken供服务器绑定
						var message="refreshtoken-"+refreshtoken+"-"+oppositeUserId;
						ws.send(message);
					}
					
					//接收到数据
					ws.onmessage = function(result){
						//拆解
						var callId=result.data.substring(0,32);
						var newmes=result.data.substring(33);
						//回调服务器，通知已经收到
						ws.send("call_back-"+callId);
						//页面显示
						var html='<div class="userMesage">'
								+'	<div class="photo">'
								+'<a href="forum-other-centre.html?userId='+$("#otherId").val()+'"><img src="'+$("#otherImg").val()+'" ></a>'
								+'	</div>'
								+'	<div class="userContent">'
								+		newmes
								+'	</div>'
								+'</div>';
						$('#mess').append(html);
						$('.infinite-scroll-top')[0].scrollTop=$('.infinite-scroll-top')[0].scrollHeight;
						
						//console.log(callId);
						//console.log(newmes);
					}
					
					
					
				})
		</script>
		<script>
			$.init();
		</script>
	</body>

</html>
